<template>
  <n-modal
    v-model:show="getProps.modalData.show"
    class="custom-card"
    preset="card"
    :style="{ width: '720px' }"
    :title="title"
    :bordered="false"
    :segmented="{
      content: true,
      footer: true
    }"
  >
    <div class="content">
      <template v-if="content">
        {{ content }}
      </template>
      <slot />
    </div>
    <n-form ref="formRef" :model="form" label-placement="left" :label-width="100" :rules="rules">
      <n-form-item label="短信验证码" path="smsCode">
        <n-space vertical>
          <n-space align="center">
            <n-input v-model:value.number="form.smsCode" maxlength="6" placeholder="请输入短信验证码" />
            <x-sms-code :mobile="adminInfo.merchantMobile" :sms-type="getProps.smsType" />
          </n-space>
          <div style="color: #999999">{{ smsAlertText }}</div>
        </n-space>
      </n-form-item>
    </n-form>
    <template #footer>
      <n-space justify="right">
        <n-button @click="handleClose">取消</n-button>
        <n-button type="primary" @click="handleConfirm">{{ positiveText }}</n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<script setup lang="ts">
  import { NModal, NSpace, NButton, NForm, NFormItem, NInput, FormValidationError } from 'naive-ui'
  import { XSmsCode } from '@/components'
  import { useStore } from '@/store'
  import { reactive, watch, ref, computed } from 'vue'

  const store = useStore()
  const props = defineProps({
    modalData: {
      type: Object,
      default: () => ({})
    },

    title: {
      type: String,
      default: '获取短信验证码'
    },

    smsType: {
      type: String,
      default: ''
    },

    content: {
      type: String,
      default: ''
    },

    positiveText: {
      type: String,
      default: '确认'
    }
  })

  const emits = defineEmits(['success'])
  const getProps = reactive(props)

  const formRef = ref(null)
  const form = ref({
    smsCode: null
  })

  const rules = reactive({
    smsCode: { required: true, trigger: ['blur', 'input'], message: '请输入验证码' }
  })

  const adminInfo = ref({
    merchantMobile: ''
  })
  const smsAlertText = computed(() => {
    const mobile = adminInfo.value?.merchantMobile?.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    return `短信验证码将发送到店铺管理员的手机：${mobile}，请注意查收。`
  })

  watch(
    () => props.modalData.show,
    (val) => {
      if (val) {
        if (props.modalData.principalMerchantMobile) {
          adminInfo.value.merchantMobile = props.modalData.principalMerchantMobile
        } else {
          getStoreAdminInfo()
        }
      } else {
        form.value.smsCode = null
      }
    }
  )

  async function getStoreAdminInfo() {
    const { data } = await store.dispatch('store-manage/getStoreAdminInfo')
    adminInfo.value.merchantMobile = data?.merchantMobile
  }

  function handleClose() {
    getProps.modalData.show = false
  }

  function handleConfirm() {
    formRef.value.validate(async (errors: Array<FormValidationError>) => {
      if (!errors) {
        getProps.modalData.show = false
        emits('success', form.value.smsCode)
      } else {
        console.log('errors', errors)
      }
    })
  }
</script>

<style scoped lang="scss"></style>
